<template>
	<div class="theme">
		<router-view :key="key"></router-view>
		<van-tabbar v-model="active" route class="van-tabbar-bgColor">
			<van-tabbar-item replace to="/">
				<span>{{$t('Index.v1')}}</span>
				<img slot="icon" slot-scope="props" :src="props.active ? icon.active : icon.normal">
			</van-tabbar-item>
			<van-tabbar-item replace to="/CrowdFunding">
				<span>{{$t('Index.v2')}}</span>
				<img slot="icon" slot-scope="props" :src="props.active ? icon.active2 : icon.normal2">
			</van-tabbar-item>
			<van-tabbar-item replace to="/Assets">
				<span>{{$t('Index.v3')}}</span>
				<img slot="icon" slot-scope="props" :src="props.active ? icon.active3 : icon.normal3">
			</van-tabbar-item>
		</van-tabbar>
	</div>
</template>

<script>
	let _this;
	export default {
		name: 'Index',
		components: {},
		props: {},
		data() {
			return {
				active: 0,
				icon: {
					normal: require('./../assets/images/icon-home.png'),
					active: require('./../assets/images/icon-home2.png'),
					normal2: require('./../assets/images/icon-otc.png'),
					active2: require('./../assets/images/icon-otc2.png'),
					normal3: require('./../assets/images/icon-my.png'),
					active3: require('./../assets/images/icon-my2.png')
				}
			};
		},
		beforeCreate() {
			_this = this;
		},
		watch: {},
		computed: {
			key() {
				return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date();
			}
		},
		methods: {},
		created() {},
		mounted() {
			
		},
		destroyed() {

		},
		filters: {}
	};
</script>

<style lang="less" scoped>
	.van-tabbar-item__icon img {
		height: 20px;
	}
</style>
